More results...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
post
page
Python IDE Dashboard

Boolean Algebra Simplification Quiz

Put your Boolean Algebra skills to the test!

The Boolean Algebra Simplification QuizOpen in New Window

The Boolean Game

Play the Boolean Game to put your Boolean logic to the test!

The Boolean GameOpen in New Window

Interactive Sorting Algorithms

Use the following two interactive sorting algorithm activities to test your understanding of the Bubble sort and the Insertion sort algorithms.
Bubble Sort Interactive ActivityOpen in New Window Insertion Sort Interactive ActivityOpen in New Window

Bubble SortInsertion Sort

Online HTML, CSS & JavaScript Editor

Try our new online editor to code using HTML, CSS and JavaScript.

Not sure what to code? Try one of our HTML/CSS or JavaScript challenges.

Check our CSS Tools Hub to help you in any of your HTML / CSS web projects.

You can open the online web editor in a new window by using this button:

Estimating π with François Viète’s Infinite Product

Long before computers existed, mathematicians were already trying to pin down the value of π using clever geometric constructions and infinite processes. One of the earliest breakthroughs came from a French mathematician named François Viète (1540–1603), who discovered one of the first known infinite product formulas in mathematics.

Viète’s work is especially remarkable because it predates calculus. Instead of using series or integrals, he built Ï€ using an infinite sequence of nested square roots derived from geometry.

The Viète Formula for π

Viète discovered that π can be expressed as an infinite product:
\frac{2}{\pi} = \frac{\sqrt{2}}{2} \cdot \frac{\sqrt{2 + \sqrt{2}}}{2} \cdot \frac{\sqrt{2 + \sqrt{2 + \sqrt{2}}}}{2} \cdot \cdots

Rearranging this formula gives:
\pi = \frac{2}{\displaystyle \prod_{n=1}^{\infty} \frac{a_n}{2}}

Where each term is built recursively:

  • a_1 = \sqrt{2}
  • a_2 = \sqrt{2+\sqrt{2}}
  • a_3 = \sqrt{2+\sqrt{2+\sqrt{2}}}

And so on…

  • a_n = \sqrt{2+\sqrt{2+\sqrt{2+\cdots}}} = \sqrt{2+ a_{n-1}} with n>1.

As the number of terms (n) increases, the product converges slowly but steadily towards Ï€. François Viète’s infinite product for estimating Ï€ can be visualised by drawing regular polygons inside a circle, where increasing the number of sides makes the polygon more closely approximate the circle and leads to a more accurate estimate of Ï€.
​

Python Challenge

Your task is to write a Python program that estimates the value of π using Viète’s infinite product. However instead of computing infinite terms, you will approximate the value of π using a fixed number of iterations.

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Recycling Bin Helper Program

Recycling correctly helps reduce waste and protects the environment. Different types of waste need to be placed in different bins, but remembering which item goes in which bin can sometimes be confusing.

In this Python challenge, you will create a simple recycling assistant that asks the user questions about an item they want to throw away and then tells them which bin it belongs in.

This challenge is ideal for beginners who want to practise:

  • Using variables
  • Getting user input
  • Using conditional statements (if, elif, else)
  • Making decisions in a program
  • Creating user-friendly text-based applications

The Recycling Bins

Our program will based on the following recycling scheme where each household has access to 5 bins of different colours:

Bin Waste Type
Blue Bin Plastics, plastic films, glass bottles, drink cartons (Tetra Pak) and cans.
Green Bin Paper, cardboard, books and cardboard packaging.
Grey Bin Food waste, plate scrapings, mouldy food, pet food, tea bags and coffee grounds.
Brown Bin Garden waste including grass clippings, leaves, dead flowers/plants and windfall fruit.
Black Bin General rubbish such as crisp packets, used nappies and polystyrene.

Python Challenge

To solve this challenge, we will write a Python program that ask the user about the item they are about to throw away. If it’s a recognised item, our program will try to decide straight away in which bin the item should go to.

For instance, we know that newspapers, magazines, books, leaflets and postcards should all end up in the green bin. so we can use some Python code to identify if the the item being thrown away belong to this list of items:

item = input("What are you recycling today?").lower()
if item in ["newspaper","magazine","book","leaflet","postcard"]:
   print("This " + item + " goes in the green bin.")

If this item is not in this list we can check if it belongs to other lists of recognisable items for the different recycling bins. To do so we will use elif statements:

item = input("What are you recycling today?").lower()
if item in ["newspaper","magazine","book","leaflet","postcard"]:
   print("This " + item + " goes in the green bin.")
elif item in ["plastic bottle","drink carton","tetra pak","metallic can","aluminium can","glass bottle"]:
   print("This " + item + " goes in the blue bin.")
elif ...
   ...

Your Turn…

Use the online Python IDE that you will find at the bottom of this blog post to complete the code and cater for a list of items for each of the 5 recycling bins of our recycling scheme.

Unrecognised items…

Now that you have completed the code to cater for all 5 bins, you can test it and see if gives you the right advise for different items.
You will quickly realise that using this approach it is not very practical to list every single possible item and that the program may not recognise the items the user want to throw, especially if this item is either not mentioned in the given list or is described differently.

So in this case we will get our program to ask the user a series of questions to determine what type of item they are disposing of.

For example the program could ask the following questions and use the following decision tree:

Python Code

Complete the following code online:

Extension Challenge 1

Some items should not end up in our bins but instead should be brought to the nearest recycling centre. These includes batteries, chemicals, and all forms of eWaste. Could you tweak your code to inform the user to not throw these items in any of their bins but instead bring them to their local recycling centre.


Extension Challenge 2

The above challenge is based on using selection in our code (If statements).

Your extra challenge is to use iteration (using a loop) within your code. You will tweak your code to allow the user to recycle multiple items by repeating the program until they choose to quit.

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Python Challenge: Nicomachus’ Theorem

Nicomachus of Gerasa was an ancient Greek mathematician who lived around 60–120 AD. He is best known for his work Introduction to Arithmetic, one of the earliest surviving books on number theory.

One of the most famous results attributed to Nicomachus is a striking theorem about numbers and patterns. It shows that if you add together the cubes of the first n natural numbers, the result is exactly the same as squaring the sum of those numbers—a surprisingly elegant mathematical relationship.

In this challenge, we will write a Python program to verify Nicomachus’ theorem with any given value for n.

To do so we will first investigating one a surprising relationship between the sum of consecutive odd numbers and perfect square numbers. Effectively Nicomachus observed that:

The sum of the first n odd numbers is equal to n².

We can translate this observation into a mathematical equation:

1 + 3 + 5 + \cdots + (2n - 1) = n^2

For instance:
1 = 1^2 1 + 3 = 4 = 2^2 1 + 3 + 5 = 9 = 3^2 1 + 3 + 5 + 7 = 16 = 4^2

Now let’s use some Python code to verify this theory:

Nicomachus’s Theorem

Nicomachus’s Theorem can be defined as follows:

The sum of all the cubes of the first n natural numbers is equal to the square of the sum of those numbers.

We can translate this theorem into a mathematical equation:
1^3 + 2^3 + 3^3 + \cdots + n^3 = (1 + 2 + 3 + \cdots + n)^2

Using sigma notation, the same theorem can be expressed more compactly as:
\sum_{k=1}^{n} k^3 = \left( \sum_{k=1}^{n} k \right)^2

For instance:
1^3 = 1 = 1^2 1^3 + 2^3 = 9 = (1+2)^2 1^3 + 2^3 + 3^3 = 36 = (1 + 2 + 3)^2 1^3 + 2^3 + 3^3 +4^3 = 100 = (1 + 2 + 3 + 4)^2

Python Challenge

Your task is to reuse a similar approach as used in the above Python code to verify this theorem for any given value of n.

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Graffiti Wall using CSS


The aim of this challenge is to create an eye-catching digital graffiti wall using HTML and CSS. By doing so we will improve our CSS skills focusing on CSS positioning, images and text formatting.

Learning Outcomes

In this tutorial, you will learn how to:

  • Position elements using absolute positioning
  • Resize images using CSS
  • Rotate images and text
  • Apply transparency effects
  • Import and use custom Google Fonts
  • Add text shadows and styling effects

Starter Code

We have started the graffiti wall using some HTML and CSS code. You will be able to edit this wall in a new window using this button:

The HTML code already contains all the images and text elements that will be placed on the wall.

<img src="https://www.101computing.net/wp/wp-content/uploads/arrow.png" id="arrow">
<img src="https://www.101computing.net/wp/wp-content/uploads/peace.png" id="peace">
<img src="https://www.101computing.net/wp/wp-content/uploads/tape.png" id="tape">
<img src="https://www.101computing.net/wp/wp-content/uploads/lightning-strike.png" id="lightning">
<img src="https://www.101computing.net/wp/wp-content/uploads/spraycan.png" id="spraycan">
<img src="https://www.101computing.net/wp/wp-content/uploads/dj-artist.png" id="dj-artist">
<img src="https://www.101computing.net/wp/wp-content/uploads/skateboarder.png" id="skateboarder">
<img src="https://www.101computing.net/wp/wp-content/uploads/astronaut.png" id="astronaut">

<div id="street-artist">#Street Artist</div>

Step 1: Creating the Brick Wall

We have started our CSS code to give our page a brick wall background using the following CSS code:

BODY {
  background-image: url(https://www.101computing.net/wp/wp-content/uploads/brick-wall.jpg);
  background-repeat: repeat;
} 

What does this do?

CSS Property Purpose
background-image Sets the image used as the page background
background-repeat Repeats the image to cover the page

Step 2: Positioning & Resizing Objects

We have started to position a couple elements including the peace symbol. To do so we are using absolute positioning in CSS which let us specify the exact position of our element on the page using the top and and left properties in CSS.

To resize our pictures, without stretching them, we will just specify either the width or the height of the picture in CSS. We do not include both the width and height properties as if we used both, we could end up stretching the picture. By only specifying either the width or the height, the other property will automatically adjust to keep the correct aspect ratio of the picture.

Here is the code to position and resize the peace sign on our wall:

#peace {
  position: absolute;
  top:120px;
  left:600px;
  width: 160px;
}

Your turn
Use different selectors such as #arrow, #dj-artist, #astronaut and use the relevant CSS properties to reposition and resize all the images to cover your graffiti wall.


Step 3: Rotating Objects

Now that your images are in position you can also rotate them using the following CSS code:

transform: rotate(20deg);

With his code you can use a positive or a negative angle to rotate your object clockwise or anti-clockwise.


Step 4: Flipping Images

To flip an image horizontally use the following CSS code:

transform: scaleX(-1);

Step 5: Layering Images

To change the layering order of your images when they overlap, you can use the z-index property in CSS:

z-index: 2;

Step 6: Importing Google Fonts & Formatting Text

For more exciting fonts that the standard web-safe fonts (Arial, Verdana, Times New Roman, etc.), we recommend importing your selection of Google fonts.

For instance, in the example provided, our text “StreetArtist” is formatted using the Frijole font from Google Fonts.

To import it and be able to use it within your CSS code, add the following line at the top of your CSS code:

@import url('https://fonts.googleapis.com/css2?family=Frijole&display=swap');

You can then use some CSS code to change the font family, size and colour of your text:

#urban {
  font-family:"Frijole";
  font-size:40pt;
  color:#441111;
}

Step 7: Adding a Shadow to the Text

It is possible t create a shadow effect to your text which can help improve the contrast and make your text easier to read especially when a page has a background picture.

text-shadow: 2px 2px #ffffff;

CSS Summary

Here is a summary of the CSS properties this challenged focused on:

Property Use
position:absolute Place elements anywhere on the page
top / left Specify the position/coordinates of an element on the page when using absolute positioning
z-index Change the layering orders of overlapping elements
transform Rotate or flip an element
opacity Apply transparency to an element
font-family Change the font of your text
font-size Change the size of your text
color Change the colour of your text
text-shadow Add outline/shadow effect to your text
unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Solution...

You are viewing this solution as part of your full membership subscription!

HTMLCSS Code

HTML Code

<img src="https://www.101computing.net/wp/wp-content/uploads/arrow.png" id="arrow">
<img src="https://www.101computing.net/wp/wp-content/uploads/peace.png" id="peace">
<img src="https://www.101computing.net/wp/wp-content/uploads/tape.png" id="tape">
<img src="https://www.101computing.net/wp/wp-content/uploads/lightning-strike.png" id="lightning">
<img src="https://www.101computing.net/wp/wp-content/uploads/spraycan.png" id="spraycan">
<img src="https://www.101computing.net/wp/wp-content/uploads/dj-artist.png" id="dj-artist">
<img src="https://www.101computing.net/wp/wp-content/uploads/skateboarder.png" id="skateboarder">
<img src="https://www.101computing.net/wp/wp-content/uploads/astronaut.png" id="astronaut">

<div id="street-artist">#Street Artist</div>
<div id="urban">Urban Freedom</div>

CSS Code

@import url('https://fonts.googleapis.com/css2?family=Frijole&family=Rubik+Dirt&display=swap');

BODY {
  background-image: url(https://www.101computing.net/wp/wp-content/uploads/brick-wall.jpg);
  background-repeat: repeat;
}

IMG {position: absolute; opacity:0.7;}

#arrow {
  top:430px;
  left:840px;
  transform: rotate(90deg);
  width: 120px;
}

#peace {
  top:40px;
  left:900px;
  transform: rotate(20deg);
  width: 120px;
}

#tape {
  top:20px;
  left:400px;
  transform: rotate(20deg);
  width: 200px;
}

#lightning {
  top:20px;
  left:20px;
  width: 80px;
}

#spraycan {
  top:410px;
  left:690px;
  width: 100px;
  transform: scaleX(-1);
}

#dj-artist {
  top:20px;
  left:10px;
  width: 450px;
}

#skateboarder {
  top:220px;
  left:470px;
  width: 190px;
  opacity: 0.5
  transform: rotate(20deg);
  }

#astronaut {
  top:180px;
  left:770px;
  width: 200px;
  transform: rotate(20deg);
}


#street-artist {
  position: absolute;
  opacity:0.7;
  top:280px;
  left:80px;
  font-size: 32pt;
  opacity:1;
  font-family: "Rubik Dirt", system-ui;
  font-weight: 400;
  color: #002294;
  text-shadow: 2px 2px #ffffff;
  transform: rotate(-5deg);
}

#urban {
  position: absolute;
  opacity:0.7;
  top:100px;
  left:400px;
  font-size: 40pt;
  color: #441111;
  transform: rotate(-20deg);
  font-family: "Frijole", system-ui;
  font-weight: 400;
}

UK Car Plate Number Decoder

Did you know you can find out where a UK car was first registered or how old it is just by looking at its number plate?

In this Python challenge, we will create a program that decodes a UK plate number. The program will ask the user to enter a UK car registration plate and the program will then:

  • Identify the regional registration area of the car
  • Calculate the approximate age of the vehicle

Decoding a UK Plate Number

Modern UK registration plates follow this format:

Regional Area Codes

The first letter of the area code tells us where the vehicle was registered sing the following letters/codes

Letter Region
A Anglia
B Birmingham
C Cymru (Wales)
D Deeside / Shrewsbury
E Essex
F Forest and Fens
G Garden of England
H Hampshire and Dorset
K Luton / Northampton
L London
M Manchester and Merseyside
N North
O Oxford
P Preston / Carlisle
R Reading
S Scotland
V Severn Valley
W West of England
Y Yorkshire

Age Identifier Rules

The two numbers in the registration plate indicate when the vehicle was first registered. It covers a 6-month period, which is why new plates are issued twice a year and the age identifier is determined based on the following rules:

  • For vehicles registered between March and August hold, we use the last 2 digits of the year it was put on the road. e.g for a car registered in March 2026, the age identifier code used is 26.
  • For cars registered from September to February, we use the same approach but add 50 to the code. So for a car registered in September 2026, the age identifier will be 26 + 50 = 76

So to determine the approximate age of a car based on the age identifier we will use the following rule:

Age of a Car?

Once we have established the year of registration of a car, we can estimate its age (in years) using the following formula:

What about the last 3 letters?

Unlike the first 4 characters of a plate which have a meaning, the final 3 letters don’t mean anything. Instead, these random 3-letter combinations are used to help keep each plate number unique compared to other plate numbers for cars registered at the same time.

Python Challenge

Let’s write a Python program that will:

    Ask the user to enter a valid UK registration plate number
    Validate this number ensuring that the plate number is exactly 8 characters long (including the space before the last 3 letters)
    Extract the first digit of the plate number (first digit of the area code)
    Extract the 2 number digits (age Identifier: the 3rd and 4th digits of the plate number)
    Lookup the area code within the list of area codes and output the area where the vehicle was registered.
    Calculate and output the estimated registration year of the vehicle.
    Calculate and output the estimated age (in years) of the vehicle.

We have started the code for you but this code is incomplete. Can you complete the code to calculate both the registration year and the estimated age of the car.

Testing:

Use you code to work out the area code and estimated age of the following vehicles:


unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Build Your Own Pizza – Price Calculator

Welcome to this beginner-friendly Python challenge! In this task, you will create a simple pizza ordering system that calculates the total cost based on a customer’s choices. This is a great way to practise input handling, selection (if statements), and basic arithmetic in Python.

The Challenge

For this challenge, you will create a program that allows a customer to build their own pizza by choosing:

  • Pizza size (Small, Medium, Large)
  • Base type (Classic crust, thin crust or deep pan)
  • Number of toppings
  • Eat in or takeaway

Your program will then calculate and display the total price.

Finally, the user will be able to enter a discount code. If this discount code is correct they will receive a 20% discount on the price of their pizza!

To complete this challenge, you willl need to use:

  • input() statements to collect user choices
  • if / elif / else statements
  • Variables to store prices
  • Basic maths operations

Pizza Options & Costs

The following poster informs the customer of the process of making their own pizza and explains how the cost is calculated.

Python Code

We have started the code for you. Your job is to complete this code to let the user enter all their desired options for their pizza and to adjust the price of the pizza accordingly.

Extension Task: Discount Code

After entering all their options the customer should be given the opportunity to enter a discount code if they want to. If the user enter the code “P1ZZ4”, they should benefit from a 20% discount on the total price of their pizza!

Test Plan

Once your code is complete, test it using the following test plan to make sure all your calculations are correct!

Test # Input Values Expected Output Pass / Fail
#1 Pizza Size: Small (S)
Base: Deep
Number of Toppings 3
Eat in? Yes
Discount Code: N/A
Pizza Price: £14.50
#2 Pizza Size: Large (L)
Base: Thin
Number of Toppings 4
Eat in? No
Discount Code: FREEPIZZA
Pizza Price: £17.00
#3 Pizza Size: Medium (M)
Base: Classic
Number of Toppings 5
Eat in? Yes
Discount Code: P1ZZ4
Pizza Price: £14.00
unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area